<ion-header>
    <ion-toolbar mode="ios" color="care">
      <ion-buttons>
        <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
      <ion-title>{{ 'DetailedInfo' | translate }}</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <ion-content>
    <div style="padding: 0">
      <div style="height: 200px;width:100%; text-align: center;padding-top: 50px">
        <ion-avatar style="margin: 0 auto;width: 100px;height: 100px;">
          <ion-img style="width: 100px;height: 100px;" [src]="doctorInfo.avatar_url || '/assets/img/icondoctor.png'">
          </ion-img>
        </ion-avatar>
        <ion-label>{{doctorInfo.nickname}}</ion-label>
      </div>
      <div
        style="width: calc(100% - 40px);margin-left:20px;height:60px;border-top: 1px solid grey;border-bottom: 1px solid grey;margin-bottom: 20px;overflow: hidden;">
        <div
          style="float: left;width: 50%;height: 50px;border-right: 1px solid grey;text-align: center;padding-top: 5px;color: grey">
          {{ 'Sex' | translate }}
          <div style="color: black" *ngIf="doctorInfo.gender == 1">{{ 'Male' | translate }}</div>
          <div style="color: black" *ngIf="doctorInfo.gender == 2">{{ 'Female' | translate }}</div>
        </div>
        <div style="float: right;width: 50%;height: 50px;text-align: center;padding-top: 5px;color: grey;">
          {{ 'RegistrationFees' | translate }}
          <div style="color: black" *ngIf="doctorInfo.order_type===1">{{doctorInfo.order_price}}</div>
          <div style="color: black" *ngIf="doctorInfo.order_type===2">{{'NoFees' | translate}}</div>
        </div>
      </div>
      <div class="profiles">
        <ion-item detail (click)="showPI()">
          <ion-label color="care" style="font-size: 16px">{{ 'PersonInfo' | translate }}</ion-label>
          <ion-text color="medium" slot="end">{{ 'Details' | translate}}</ion-text>
        </ion-item>
        <ion-item>
          <ion-label color="care">{{ 'Region' | translate }}</ion-label>
          <ion-text color="medium" slot="end">{{doctorInfo.region_name}}</ion-text>
        </ion-item>
        <!-- <ion-item>
          <ion-label color="care">{{ 'Department' | translate }}</ion-label>
          <ion-text color="medium" slot="end">{{doctorInfo.department_name}}</ion-text>
        </ion-item> -->
        <ion-item>
          <ion-label>
            <ion-text color="care">
              {{ 'Department' | translate }}
            </ion-text>
            <ion-text color="medium">
              <h3>{{doctorInfo.department_name}}</h3>
            </ion-text>
          </ion-label>
        </ion-item>
  
        <ion-item>
          <ion-label color="care">{{ 'ReservationMode' | translate }}</ion-label>
          <ion-text color="medium" slot="end">
            {{['DirecAppoint' | translate,'IndirecAppoint' | translate][doctorInfo.order_type-1]}}</ion-text>
        </ion-item>
  
  
        <ion-item>
          <ion-label color="care">{{ 'College' | translate }}</ion-label>
          <ion-text color="medium" slot="end">{{doctorInfo.university}}</ion-text>
        </ion-item>
  
        <ion-item detail (click)="showMQ()">
          <ion-label color="care">{{ 'MedicalQualifications' | translate }}</ion-label>
          <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>
  
        <ion-item detail (click)="showPH()">
          <ion-label color="care" style="font-size: 16px">{{ 'PersonalHonors' | translate }}</ion-label>
          <!-- <ion-text color="medium" slot="end">{{doctorInfo.personal_honor}}</ion-text> -->
          <ion-text color="medium" slot="end">{{ 'Details' | translate}}</ion-text>
        </ion-item>
  
        <ion-item>
          <ion-label>
            <ion-text color="care">
              {{ 'CooperativeHospitals' | translate }}
            </ion-text>
            <ion-text color="medium">
              <h3>{{hospitalName}}</h3>
            </ion-text>
          </ion-label>
        </ion-item>
  
        <ion-item lines="none" *ngIf="!!doctorInfo.video_url">
          <ion-label color="care" position="stacked">
            <h3>
              {{ 'RideoInfo' | translate }}
            </h3>
          </ion-label>
          <video [src]="doctorInfo.video_url" controls="controls" preload="auto" width="320" height="240"
            style="margin: 20px auto"></video>
        </ion-item>
  
      </div>
      <ion-button shape="round" color="care" expand="block" class="defaultButton" style="margin-top: 20px; margin-bottom: 20px" (click)="toNext()">{{['DirecAppoint' | translate,'IndirecAppoint' | translate][doctorInfo.order_type-1]}}</ion-button>
    </div>
  </ion-content>